import { View, StyleSheet, ScrollView, TouchableOpacity } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { ThemedText } from "@/components/ThemedText";
import { ThemedView } from "@/components/ThemedView";
import { IconSymbol } from "@/components/ui/IconSymbol";
import { useGetUserInfoQuery } from "@/services/api/user";

export default function ProfileScreen() {
  const { data: userInfo, isLoading } = useGetUserInfoQuery();

  return (
    <SafeAreaView style={styles.container}>
      <ThemedView style={styles.userInfo}>
        <View style={styles.avatar}>
          <IconSymbol size={40} name="person.fill" color="#FBAA19" />
        </View>
        <View style={styles.userDetail}>
          <ThemedText style={styles.userName}>
            {isLoading ? "Loading..." : userInfo?.name || "ยินดีต้อนรับ"}
          </ThemedText>
          <ThemedText style={styles.userId}>
            ID: {userInfo?.id || "888888"}
          </ThemedText>
        </View>
      </ThemedView>

      {/* 功能列表 */}
      <ScrollView style={styles.menuList}>
        <MenuGroup title="บัญชีของฉัน">
          <MenuItem icon="doc.text" title="ข้อมูลส่วนตัว" />
          <MenuItem icon="creditcard" title="บัญชีธนาคาร" />
          <MenuItem icon="lock" title="ความปลอดภัย" />
        </MenuGroup>

        <MenuGroup title="การตั้งค่า">
          <MenuItem icon="bell" title="การแจ้งเตือน" />
          <MenuItem icon="gear" title="ตั้งค่าทั่วไป" />
          <MenuItem icon="questionmark.circle" title="ช่วยเหลือ" />
        </MenuGroup>

        <MenuGroup title="การตั้งค่า">
          <MenuItem icon="bell" title="การแจ้งเตือน" />
          <MenuItem icon="gear" title="ตั้งค่าทั่วไป" />
          <MenuItem icon="questionmark.circle" title="ช่วยเหลือ" />
        </MenuGroup>
      </ScrollView>
    </SafeAreaView>
  );
}

function MenuGroup({
  title,
  children,
}: {
  title: string;
  children: React.ReactNode;
}) {
  return (
    <View style={styles.menuGroup}>
      <ThemedText style={styles.groupTitle}>{title}</ThemedText>
      <ThemedView style={styles.groupContent}>{children}</ThemedView>
    </View>
  );
}

function MenuItem({ icon, title }: { icon: string; title: string }) {
  return (
    <TouchableOpacity style={styles.menuItem}>
      <ThemedText style={styles.menuTitle}>{title}</ThemedText>
      <IconSymbol size={20} name="chevron.right" color="#999" />
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  userInfo: {
    flexDirection: "row",
    padding: 20,
    alignItems: "center",
  },
  avatar: {
    width: 80,
    height: 80,
    borderRadius: 40,
    backgroundColor: "#FFF5E6",
    alignItems: "center",
    justifyContent: "center",
  },
  userDetail: {
    marginLeft: 16,
  },
  userName: {
    fontSize: 20,
    fontWeight: "600",
    marginBottom: 4,
  },
  userId: {
    fontSize: 14,
    color: "#666",
  },
  menuList: {
    flex: 1,
    padding: 16,
  },
  menuGroup: {
    marginBottom: 24,
  },
  groupTitle: {
    fontSize: 16,
    fontWeight: "600",
    marginBottom: 12,
  },
  groupContent: {
    borderRadius: 12,
    overflow: "hidden",
  },
  menuItem: {
    flexDirection: "row",
    alignItems: "center",
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: "#EEEEEE",
  },
  menuTitle: {
    flex: 1,
    marginLeft: 12,
    fontSize: 16,
  },
});
